<template>
	<view>
		<uni-nav-bar statusBar="true" 
		:fixed="true" :border="false" 
		backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				<view class="leftIcon" @tap.stop="back">
					<i class="icon iconfont icon-arrow-left"></i>
				</view>
				<view class="index-top-nav-title-content">
					{{i18n.orderDetails}}
				</view>
				<view class="rightIcon">
				</view>
			</view> 
		</uni-nav-bar>
		<view class="content">
			<view class="detail-title">
				{{i18n.PackageName}} {{curObj.title}} 
				<image src="../../static/imgs/status01.png" mode="widthFix" lazy-load></image>
				<!-- <image src="../../static/imgs/status02.png" mode="widthFix" lazy-load></image> -->
			</view>
			
			<view class="detail-item">
				<view class="detail-item-title">
					{{i18n.orderInformation}}
				</view>
				<view class="detail-item-item">
					<view class="item">
						<view>{{i18n.OrderType}}</view>
						<text>{{curObj.selectID==1? i18n.RegularInvestment : i18n.CurrentInvestment}}</text>
					</view>
				<!-- 	<view class="item">
						<view>挖矿类型</view>
						<text>定期挖矿</text>
					</view> -->
					<view class="item">
						<view>{{i18n.theTerm}}</view>
						<text>{{curObj.day}}{{i18n.day}}</text>
					</view>
				<!-- 	<view class="item">
						<view>建设基金</view>
						<text>投入基金</text>
					</view> -->
					<view class="item">
						<view>{{i18n.day_rate}}</view>
						<text>{{curObj.sl}} %</text>
					</view>
					<view class="item">
						<view>{{i18n.buy_numbers}}</view>
						<text>{{curObj.num}}</text>
					</view>
				</view>
			</view>
			<view class="detail-item">
				<view class="detail-item-title">
					{{i18n.uBaozhong}}{{curInfo[0].title_en}}{{i18n.QuantityAvailable}}
				</view>
				<view class="detail-num">
					{{curInfo[0].financial}} <text>{{curInfo[0].title_en}}</text>
				</view>
			</view>
			<view class="detail-item">
				<view class="detail-item-title">
					{{i18n.NumberOfTransfers}}
				</view>
				<view class="detail-num">
					{{curObj.freeze * curObj.num}} <text>{{curInfo[0].title_en}}</text>
				</view>
			</view>
			
			<view class="detail-btn">
				
				<view class="btn" hover-class="active" @tap.stop="transfer">
					{{i18n.goToTransfer}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../components/uni-icon/uni-icon.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang',
				'getPackages'
			])
		},
		components:{
			uniIcon,
			uniNavBar,
			Load
		},
		data() {
			return {
				curObj:{},
				curInfo:[]
			}
		},
		onLoad(e) {
			console.log(this.getPackages);
			this.getWallList();
			this.curObj = this.getPackages;
		},
		methods:{
			getWallList(){
				let _url = this.getRequestUrl+'/api/wallet/wallet_list';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				// uni.showLoading()
				this.showLoad = true;
				let result = fetch(_url, data, "POST");
				result.then(res=>{
					// uni.hideLoading()
					this.showLoad = false;
					if(res.data.code==1){
						let list = res.data.data.list;
						list.forEach((item,index)=>{
							list[index].type = (item.zdf>=0?true:false)
							list[index].zdfisshow = false;
							item.zdf = (item.zdf*100)+'%'
						})
						this.curInfo = list.filter(item=>{
							return item.token_id == this.getPackages.token_id
						})
						console.log(this.curInfo);
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}
				}).catch(err=>{
					// uni.hideLoading()
					this.showLoad = false;
					console.log(err)
				})
			},
			transfer(){
				uni.navigateTo({
					url:`/pages/fund/transfer?item=${JSON.stringify(this.curInfo[0])}`
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		font-size: 36upx;
		text-align: center;
		background: linear-gradient(to right,#32B9FF,#1D7DFF);
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.leftIcon{
			width: 80upx;
		}
		.rightIcon{
			width: 80upx;
		}
		.index-top-nav-title-content{
			flex: 1;
		}
	}
	.content{
		.detail-title{
			font-size:24upx;
			color: #1f1f1f;
			line-height: 91upx;
			padding:19upx 34upx 11upx 29upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 20upx solid #efefef;
			image{
				flex-shrink: 0;
				width: 90upx;
				height: 91upx;
			}
		}
		.detail-item{
			padding:40upx 24upx 42upx;
			border-bottom: 20upx solid #efefef;
			.detail-item-title{
				font-size:24upx;
				color: #000000;
				position: relative;
				padding-left: 26upx;
				font-weight: bold;
				margin-bottom: 18upxs;
				&::before{
					content: '';
					position: absolute;
					width: 4upx;
					height: 20upx;
					background-color:#1D7DFF;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.detail-num{
				flex: flex;
				align-items: center;
				font-size:45upx;
				color: #2f2f2f;
				padding:20upx 0 20upx  26upx;
				text{
					margin-left: 10upx;
					font-size: 24upx;
					font-weight: bold;
				}
			}
			.detail-item-item{
				padding-left: 26upx;
				.item{
					padding:18upx 0;
					display: flex;
					align-items: center;
					view{
						width: 98upx;
						font-size:24upx ;
						color: #5E5E5E;
						margin-right: 30upx;
					}
					text{
						flex: 1;
						font-size:28upx;
						color: #2E2E2E;
					}
				}
			}
		}
		.detail-btn{
			padding:90upx 0 0;
			display: flex;
			justify-content: center;
			align-items: center;
			.btn{
				width: 276upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border-radius: 10upx;
				font-size:25upx;
				background-color: #1D7DFF;
				color: #FFFFFF;
				&.active{
					transform: scale(.9);
					opacity: .9;
				}
			}
		}
	}
</style>
